<script lang="ts" setup>
import img from '@/assets/img/long-mao.png'
import { useScrollStore } from '@/stores/scroll'
import ConnectAuthor from '@/components/ConnectAuthor.vue'

const scrollStore = useScrollStore()
let lookMoreHtml: any = null
onMounted(() => {
  lookMoreHtml = document.querySelector('.lookMore')
})
const lookMore = () => {
  scrollStore.scroll.scrollRef?.scrollTo({
    top: lookMoreHtml?.clientHeight + 100 || document.body.clientHeight,
    behavior: 'smooth'
  })
}
</script>

<template>
  <el-container class="lookMore max-md:p-5 min-h relative">
    <el-container class="w-fit min-h-content relative z-10 pb-5 pt-8" direction="vertical">
      <span class="flex max-sm:pt-0 max-w-[840px]">
        <svg preserveAspectRatio="xMidYMid meet" viewBox="0 0 300 80">
          <text
            class="max-xl:text-6xl text-7xl"
            dominant-baseline="middle"
            text-anchor="start"
            x="0"
            y="50%"
          >
            UTOPIA
          </text>
        </svg>
      </span>
      <span class="flex pt-5 w-fit pl-[1.2%] sm:gap-5 flex-col max-sm:mt-0">
        <span class="text-7xl max-xl:text-5xl max-md:text-2xl max-sm:text-xl hollow-text">
          路漫漫其修远兮
        </span>
        <span class="text-7xl max-xl:text-5xl max-md:text-2xl max-sm:text-xl hollow-text">
          吾将上下而求索
        </span>
      </span>
      <el-container class="bottom-24 absolute pl-[1.2%]">
        <ConnectAuthor />
      </el-container>
    </el-container>
    <el-image
      :src="img"
      class="!absolute long-img w-5/12 max-xl:w-1/2 max-sm:w-3/4 max-md:bottom-[20%] right-8 max-sm:right-5 bottom-[5%] z-0"
      fit="contain"
    />
    <el-container class="absolute z-10 w-full bottom-10">
      <a
        class="bg-amber-500 m-auto left-auto pb-3 pt-5 px-10 rounded-full"
        href="javascript:"
        @click="lookMore"
      >
        <SvgIcon
          :message="'查看更多'"
          :name="'icon-downward'"
          :parentClass="'flex-row-reverse !gap-2 animate-bounce'"
        />
      </a>
    </el-container>
  </el-container>
</template>

<style lang="scss" scoped>
.title {
  font-size: 200px;
}

.rotate {
  transform: rotateX(60deg);
}

svg text {
  text-transform: uppercase;
  letter-spacing: 10px;
  font-size: 64px;
  font-weight: 600;
  font-family: sans-serif !important;
  animation: stroke 20s forwards infinite;
}

@keyframes stroke {
  0% {
    fill: rgba(72, 138, 20, 0);
    stroke: #ff9400;
    stroke-dashoffset: 25%;
    stroke-dasharray: 0 50%;
    stroke-width: 0.3;
  }
  50% {
    fill: rgba(72, 138, 20, 0);
    stroke: #ff9400;
    stroke-width: 0.5;
  }
  70% {
    fill: rgba(72, 138, 20, 0);
    stroke: #ff9400;
    stroke-width: 1;
  }
  90%,
  100% {
    fill: orange;
    stroke: rgb(242, 255, 53, 0);
    stroke-dashoffset: -25%;
    stroke-dasharray: 50% 0;
    stroke-width: 0;
  }
}

@media not all and (min-width: 450px) {
  .long-img {
    width: 100%;
    top: 20%;
    right: 0;
  }
}
</style>
